<template>
  <div v-if="settingState.tabNavVisible" class="tab-nav">
    <!-- <t-tabs theme="normal" :value="$route.path" @change="(value) => handleChangeCurrentTab(value as string)"
      @remove="handleRemove">
      <t-tab-panel v-for="(routeItem, index) in tabsRouteState.tabRouterList" :key="`${routeItem.path}_${index}`"
        :value="routeItem.path" :removable="!routeItem.isHome">
        <template #label>
          <template v-if="!routeItem.isHome">
            {{ renderTitle(routeItem.title as string | Record<string, string>) }}
          </template>
<HomeIcon v-else />
</template>
</t-tab-panel>
</t-tabs> -->
  </div>
</template>

<script setup lang="ts">
import { useTabsRouterStore } from '@store';
import { useSettingStore } from '@store';
import type { TTabRemoveOptions } from '@/types/interface';
import { useLocale } from '@/hooks/useLocale';

const { push } = useRouter();
const route = useRoute();

const { tabsRouteState, tabRouters, subtractCurrentTabRouter } = useTabsRouterStore()
const { settingState } = useSettingStore()
const { locale } = useLocale();

/** tabs点击变更 */
const handleChangeCurrentTab = (path: string) => {
  const route = tabRouters.find((i) => i.path === path);
  push({ path, query: route?.query });
};

/** 删除tabs */
const handleRemove = (options: TTabRemoveOptions) => {
  const nextRouter = tabRouters[options.index + 1] || tabRouters[options.index - 1];

  subtractCurrentTabRouter({ path: options.value as string, routeIdx: options.index });
  if ((options.value as string) === route.path) push({ path: nextRouter.path, query: nextRouter.query });
}

const renderTitle = (title: string | Record<string, string>) => {
  if (typeof title === 'string') return title;
  return title[locale.value];
}

</script>

<style lang="less" scoped>
.tab-nav {
  display: flex;
  flex-direction: row;
  height: 48px;
  line-height: 48px;
  background-color: white;
  padding: 0 5px;
}

:deep(.t-tabs__nav-item > .remove-btn) {
  margin-left: 0;
  margin-right: var(--td-comp-margin-s);
}
</style>
